<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.white {
				color: white;
			}

			.right-float {
				float: right;
			}

			.com-title {
				z-index: 9999;
				position: fixed;
				width: 100%;
				height: 80px;
				background: #FF0000;
				color: #FAFAFA;
			}
		</style>
	</head>
	<body>
		<div id="app" class="margin">
			<header>
				<van-nav-bar @click-right="onClickRight" style="background-color: red;">
					<label slot="title" class="white">购物车</label>
					<label slot="right" class="white">清空购物车</label>
				</van-nav-bar>
			</header>
			<van-row>
				<van-col span="24">
					<!--购物车无商品 -->
					<div v-show="isShow_null">
						<div style="text-align: center;color: #C9C9C9;font-size: 30px;margin-top: 200px;">
							<van-icon name="cart" />
						</div>
						<div style="color:#C9C9C9 ;text-align: center;">购物车空空如也</div>
					</div>
					<!--购物车有商品 -->
					<div v-for="(item, index) in list" v-show="isShow">
						<van-col span="2" offset="1" style="text-align: center;">
							<van-checkbox v-model="item.checked" :name="item.Id" @change="check(item.checked)"></van-checkbox>
						</van-col>
						<van-col span="20" offset="1">
							<van-card :num="item.buyCount" :price="item.RealPrice" :title="item.Name" :thumb="item.CoverImage">
								<div slot="footer">
									<van-button size="small" class="right-float" @click="del(item.Id)">删除</van-button>
									<van-stepper v-model="item.buyCount" disable-input class="right-float" @plus="addcount(item.Id)" @minus="delcount(item.Id)"></van-stepper>
								</div>
							</van-card>
						</van-col>
						<footer>
							<van-submit-bar :price="totalMoney*100" :button-text="msg" :disabled="isDisabled" @submit="onSubmit"></van-submit-bar>
						</footer>
					</div>
				</van-col>
			</van-row>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				isShow_null: true,
				isShow:false,
				list: [], //购物车数据数组
				aaa: 0, //总价
				buyCount: "", //购买数量
				msg: "提交订单",
				isDisabled:false
			},
			created: function() {
				this.getshopdata(); //加载购物车数据
			},
			methods: {
				check:function(checked){//多选按钮
				},
				onClickRight: function() { //清空购物车
					var _this = this;
					_this.$dialog.confirm({
						title: '清空',
						message: '确认清空吗？'
					}).then(() => { //确认
						localStorage.removeItem("shopcar"); //清除缓存
						plus.webview.currentWebview().reload(); //购物车页面重新记载
						vm.$toast("删除成功！");
					}).catch(() => { //取消

					});
				},
				onSubmit: function() { //结算
					console.log("结算");
					var paylist=[];
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i].checked) {
							paylist.push(this.list[i]);
						}
					}
					if(paylist==""){
						this.$toast("请选择要结算的商品");
					}else{
						var pay = plus.webview.create("../views/mainHtml/pay.html", "pay", {}, {
							shopdata: paylist,
							pay: "shop",
							money:this.totalMoney*100
						});
						pay.show();
					}
					console.log(paylist);
					
				},
				getshopdata: function() { //请求购物车数据
					var _this = this;
					var shopData = JSON.parse(localStorage.getItem("shopcar")); //商品详情传过来的数组,里面放着购物车的商品id和数量
					console.log(shopData)
					if (shopData == null||shopData=="") {
						_this.isShow_null=true;
						_this.isShow=false;
					} else {
						_this.isShow_null=false;
						_this.isShow=true;
						for (var i = 0; i < shopData.length; i++) {
							ajax({ //请求购物车数据
								url: "http://dsapi.ysd3g.com/API/GoodsDetail",
								dataType: "jsonp",
								data: {
									gId: shopData[i].goodsId
								},
								success: function(res) {
									var arr = {
										Id: "",
										CoverImage: "",
										Name: "",
										RealPrice: "",
										buyCount: "",
										checked: ""
									}
									for (var j = 0; j < shopData.length; j++) {
										if (res.Detail.Id == shopData[j].goodsId) {
											_this.buyCount = shopData[j].buyCount;
											console.log(shopData[j].buyCount);
											console.log(_this.buyCount)
										}
									}
									arr.Id = res.Detail.Id;
									arr.CoverImage = res.Detail.CoverImage;
									arr.Name = res.Detail.Name;
									arr.RealPrice = res.Detail.RealPrice;
									arr.buyCount = _this.buyCount;
									arr.checked = false;
									_this.list.push(arr);
								}
							})
						}
					}
					console.log(shopData)
				},
				del: function(index) { //删除单个商品
					var _this = this;
					_this.$dialog.confirm({
						title: '删除',
						message: '删除该商品吗？'
					}).then(() => { //确认
						var shopData = JSON.parse(localStorage.getItem("shopcar")); //商品详情传过来的数组,里面放着购物车的商品id和数量
						for (var i = 0; i < shopData.length; i++) { //遍历商品
							if (shopData[i].goodsId == index) {
								shopData.splice(i, 1); //删除此商品
								localStorage.setItem("shopcar", JSON.stringify(shopData));
								//刷新页面
								plus.webview.currentWebview().reload(); //购物车页面重新记载
								_this.list.splice(i, 1);
							}
						}
						_this.$toast("删除成功！");
					}).catch(() => { //取消
						_this.$toast("取消");
					});
				},
				addcount:function(x){//增加商品数量
					var shopData = JSON.parse(localStorage.getItem("shopcar")); //商品详情传过来的数组,里面放着购物车的商品id和数量
					console.log(shopData)
					for(var i=0;i<shopData.length;i++){
						if(shopData[i].goodsId==x){
							shopData[i].buyCount+=1;
							localStorage.setItem("shopcar", JSON.stringify(shopData));
							console.log(JSON.parse(localStorage.getItem("shopcar")))
						}
					}
					
				},
				delcount:function(x){//减少商品数量
					var shopData = JSON.parse(localStorage.getItem("shopcar")); //商品详情传过来的数组,里面放着购物车的商品id和数量
					console.log(shopData)
					for(var i=0;i<shopData.length;i++){
						if(shopData[i].goodsId==x){
							shopData[i].buyCount-=1;
							localStorage.setItem("shopcar", JSON.stringify(shopData));
							console.log(JSON.parse(localStorage.getItem("shopcar")))
						}
					}
				},
				isLogin:function(){//判断是否登陆
				}

			},
			computed: {
				totalMoney() { //计算总价
					var money = 0;
					//var shopData = JSON.parse(localStorage.getItem("shopcar")); //商品详情传过来的数组,里面放着购物车的商品id和数量
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i].checked) {
							money += this.list[i].RealPrice * this.list[i].buyCount
						}
					}
					return money;
				}
			}

		});
	</script>
</html>